<!-- 账号密码登录 -->
<template>
    <div class="login" ref="login">
        <div class='login-title clearfix'>
            <span>密码登录</span>
            <p>登录表示同意<i>用户协议</i>和<i>隐私政策</i></p>
        </div>
        <div class="phone login-input">
            <input type="number" placeholder="请输入手机号" v-model="phone"  maxlength="13" oninput="if(value.length>13)value=value.slice(0,13)">
            <span class="clean"  v-show="phone!=''" @click="cleanClick(1)"></span>
        </div>
        <div class="pass login-input">
            <input type="password" placeholder="请输入密码" v-model="password"  maxlength="20">
            <span class="clean"  v-show="password!=''" @click="cleanClick(2)"></span>
        </div>
        
        <div :class="['login-btn shadow2',canLogin ? 'can-login' :'']" @click="goLogin()">登 录</div>
        <!-- <div :class="['round-btn',canLogin ? 'can-login shadow2' :'',{'waiting':waiting==1}]" @click="goLogin()">
            <span v-show="waiting==1"></span>
        </div> -->
        <div v-show="bottomShow">
            <div class="login-tips">
                <p v-if="type==1">如果您的账号为学校统一开通下发的，请在本页面通过您的手机号码与密码进行登录。</p>
                <p v-if="type==1">否则，请使用“验证码登录”或者“快乐学堂用户登录”来登录快乐读书吧</p>
                <p v-if="type==2">如果您的账号是自己在www.91118.com中注册的，请在本页面通过您的手机号码与密码进行登录。</p>
                <p v-if="type==2">否则，请使用“验证码登录”或者“师生通用户登录”来登录快乐读书吧</p>
            </div>
            <div class="login-tab" v-if="type==1" @click="loginTab()"><span>验证码登录</span></div>
            <div class="login-tab clearfix" v-if="type==2">
                <div class="tab-box">
                    <span class="left" @click="loginTab()">验证码登录</span>
                    <i class="left"></i>
                    <span class="left" @click="goReset()">找回密码</span>
                </div>
                
            </div>
        </div>
        <transition name='fadedown'>
            <Warning v-show="warnShow" :warnShow="warnShow" :warnText="warnText"></Warning>
        </transition>
    </div>
</template>

<script>
import Warning from '@/components/Warning' //提示窗
import { axGet,axPost } from '@/api/index'
import { iosSystem } from '@/assets/js/base'

export default {
    name: "login",
    components:{
        Warning,
    },
    data(){
        return{
            type:this.$route.query.type,   //1师生通  2快乐学堂
            phone:localStorage.getItem("readPhone") ? localStorage.getItem("readPhone") : '',  //电话
            password:localStorage.getItem("readPassword") ? localStorage.getItem("readPassword") : '',  //密码
            canLogin:false,   //是否可点击
            bodyHeight:0,
            bottomShow:true,
            //提示窗
            warnShow:false,
            warnText:'',
            waiting:0,
        }
    },
    watch:{
        phone(newVal,oldVal){
            if(newVal){  
              this.checkInput()
            }
        },
        password(newVal,oldVal){
            if(newVal){  
              this.checkInput()
            }
        },
    },
    created(){ 
        this.$parent.menuShow=false; 
    },
    mounted(){
        this.$nextTick(()=>{
            this.bodyHeight=this.$refs['login'].clientHeight
            if(!iosSystem()){
                window.addEventListener('resize', () => {
                    let height=this.$refs['login'].clientHeight
                    if(height<this.bodyHeight){
                        this.bottomShow=false
                    }else{
                        this.bottomShow=true
                    }
                })
            }
        })
    },
    methods:{
        loginTab(){
            this.$router.replace({path:'/',query: {}});
        },
        // 清除
        cleanClick(num){
            if(num==1){
                this.phone='';
            }else if(num==2){
                this.password='';
            }
            this.canLogin=false;
        },
        // 校验
        checkInput(){
            let reguP=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;  
            let reguW=/^[0-9a-zA-Z]*$/g;
            this.password.length>=6 ? this.canLogin=true : this.canLogin=false;
        },
        // 忘记密码
        goReset(){
            this.$router.push({path:'/',query: {isreset:1}});
        },
        //登录请求
        goLogin(){
            if(this.canLogin && this.waiting!=1){
                this.waiting=1
                localStorage.setItem("readPhone",this.phone)
                axPost(this.type==1 ? 'SSTLogin': 'Login', {
                    username: this.phone,
                    pass:this.password,
                    getUserType:'all',//获取用户类型,student,teacher,all
                }).then(res => {
                    if(res.ResultCode==1){
                        sessionStorage.setItem("rolesList",JSON.stringify(res.Value))
                        if(res.Value.length==1){
                            this.$parent.myInfo=res.Value[0];
                            if(this.$parent.myInfo.ClassList.length>0){
                                this.getClassName()
                            }else{
                                sessionStorage.setItem("myInfo",JSON.stringify(this.$parent.myInfo))
                                this.$router.push({path:'/bookshelf',query: {}});
                            }
                        }else{
                            this.$router.push({path:'/roles',query: {}});
                        }
                        // localStorage.setItem("readPassword",this.password)
                    }else if(res.ResultCode==-5){
                        this.warnShow=true
                        this.warnText='账号或密码错误'
                    }else{
                        this.warnShow=true
                        this.warnText='登录失败'
                    }
                    this.waiting=2
                })
            }
            
        },
        //获取班级
        getClassName(){
            let classStr=''
            let classJson=[]
            this.$parent.myInfo.ClassList.forEach((code,i) => {
                classStr=classStr+','+code;
                let list={
                    chose:false,
                    code:code,
                    name:'',
                }
                classJson.push(list)
            });
            axGet('GetClassName', {
               ClassIds:classStr
            }).then(res => {
                if(res.ResultCode==1){
                    classJson.forEach((item,i) => {
                        item.name=res.Value[item.code]
                    });
                    this.$parent.myInfo.classJson=classJson
                    
                    sessionStorage.setItem("myInfo",JSON.stringify(this.$parent.myInfo))
                    this.$router.push({path:'/bookshelf',query: {}});
                }
            })
        },

        
    }
}
</script>